<template>
	<view class="trashRecord">
		<titleName :name="name"></titleName>
		<view class="title-bgc"></view>
		<view class="container">
			<view class="top-wrap">
				<view class="search-wrap">
					<uni-datetime-picker type="date" placeholder="请选择本次更换日期" :clear-icon="true"
						v-model="params.startdate" />
					<button @click="getDataList">查询</button>
				</view>
				<div class="sel-wrap">
					<uni-data-select v-model="params.wastetype" placeholder="危废类型"
						:localdata="adviceTypeList"></uni-data-select>
					<uni-data-select class="two" placeholder="危废代码" v-model="params.wastecode"
						:localdata="wasteCodeList"></uni-data-select>
				</div>
			</view>
		</view>
		<view class="content-wrap">
			<noData v-if="dataList.length==0" />
			<view class="item" v-for="item in dataList" :key="item.id">
				<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/beijing-icon.png"
					class="line" mode=""></image>
				<view class="title-name">
					危废类型：{{typeList.find(i=>i.id==item.wastetype)?.name}}

				</view>
				<view class="advice-name">设施名称：{{item.devicename}}</view>
				<view class="advice-num">设施编号：{{item.devicecode}}</view>
				<view class="bgc-wrap">
					<view class="bgc-color-wrap">
						<!-- <view>
							设施易损件类型2：灯管
						</view> -->
						<view>
							<view class="name">危废类型：{{typeList.find(i=>i.id==item.wastetype)?.name}}</view>
							<view class="val">危废代码：{{wasteCodeList.find(i=>i.wastecode==item.wastecode)?.text}}
							</view>
						</view>
						<view>
							<view class="name">本次更换量：{{item.putoutnum}}kg</view>
							<view class="val">本次填充量：{{item.putinnum}}kg</view>
						</view>
						<view>
							<view class="name">碘值：{{item.dianval}}</view>
							<view class="val">使用周期：{{item.circledays}}天</view>
						</view>

						<view>
							预计下次更换时间：{{item.nextchangedate.split(' ')[0]}}
						</view>
					</view>
				</view>

				<view class="img-wrap">
					<view class="update-next">
						本次更换时间：<text class="blue">{{item.commitdate.split(' ')[0]}}</text>
					</view>
					<view class="update-img-pre">
						<view class="pre" @click="searchPreImage(item.changebeforeimgurl)">
							更换前图片：<text class="blue">点击查看</text>
						</view>
						<view class="padding" @click="searchPreImage(item.changemidimgurl)">
							更换中图片：<text class="blue">点击查看</text>
						</view>
					</view>
					<view class="update-next" @click="searchPreImage(item.changeafterimgurl)">
						更换后图片：<text class="blue">点击查看</text>
					</view>
					<view class="update-next" @click="searchPreImage(item.imgdianvalurl)">
						碘值监测报告图片：<text class="blue">点击查看</text>
					</view>
					<view class="update-next" @click="searchPreImage(item.imgticketurl)">
						相关发票图片：<text class="blue">点击查看</text>
					</view>
					<view class="update-next" @click="searchPreImage(item.imgstockkeepurl)">
						入库暂存图片：<text class="blue">点击查看</text>
					</view>
				</view>
			</view>



		</view>
	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import noData from '../../components/noDataShow.vue'
	import http from '../../request/index.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive
	} from 'vue'
	let name = "记录"
	let wasteCodeList = ref([])
	let adviceTypeList = ref([])
	let single = ref('')
	let value = ''
	let typeList = ref([])
	let params = reactive({})
	let deviceId = ref('')
	let dataList = ref([])
	let range = ref([{
			value: 0,
			text: "篮球"
		},
		{
			value: 1,
			text: "足球"
		},
		{
			value: 2,
			text: "游泳"
		},
	], )
	onLoad((e) => {
		console.log(e, 'e');
		deviceId.value = e.id
		getDataList()
	})
	let searchPreImage = (images) => {
		console.log(images, 'images');
		uni.previewImage({
			current: 0,
			urls: images.split(',')
		});
	}
	let getDataList = () => {
		params.enddate = params.startdate
		http({
			url: '/stock/datalist',
			data: {

				...params
			}
		}).then((res) => {
			if (res.code == 0) {
				dataList.value = res.data.list

			}
		})
	}

	http({
		url: '/listitem/getmodule',
		data: {
			module: 'B03'
		}
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			typeList.value = res.data
			adviceTypeList.value = data.map((item) => {
				return {
					text: item.name,
					value: item.id
				}
			})

		}

	})
	http({
		url: '/wasteCode/getListItems'
	}).then((res) => {
		if (res.code == 0) {
			wasteCodeList.value = res.data.map((item) => {
				return {
					...item,
					text: item.wastecode + `(${item.wastetypename})`,
					value: item.wastecode
				}
			})
		}
	})
</script>

<style lang="scss" scoped>
	:deep(.uni-date) {
		height: 100% !important;
		border: none !important;
	}

	:deep(.uni-date-editor) {
		height: 100% !important;
		border: none !important;
	}

	:depp(.uni-select__selector) {
		width: 410rpx !important;

	}

	:deep(.uni-select__selector-scroll) {
		width: 410rpx !important;
	}

	:deep(.uni-date-x) {
		height: 100% !important;
		border: none !important;
	}

	:deep(.uni-date-editor--x) {
		height: 100% !important;
		border: none !important;
	}

	:deep(.uni-select__input-text) {
		width: auto;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;

	}

	:deep(.uni-date__x-input) {

		font-weight: 400;
		font-size: 25rpx;
		color: #999999;

	}

	:deep(.uniui-clear) {

		font-size: 36rpx !important;
	}

	:deep(.uni-icons) {
		margin-left: 4rpx;
		font-size: 36rpx !important;
	}

	:deep(.uni-select) {
		border: none;
		min-width: 200rpx;
		width: auto;

		font-weight: 400;
		font-size: 28rpx;
		color: #333333;

		& view:nth-of-type(3) {
			width: 410rpx;
		}
	}

	.trashRecord {
		width: 100vw;
		height: 100vh;
		padding-top: 160rpx;
		overflow: hidden;

		.title-bgc {
			background: #0874FA;
			height: 160rpx;
			width: 100vw;
			position: fixed;
			top: 0%;
			left: 0;

		}

		.content-wrap {
			height: calc(100vh - 160rpx - 192rpx);
			background: #F0F2F5;
			width: 100vw;
			overflow: scroll;
			padding: 17rpx 20rpx 55rpx 30rpx;

			.item {

				background: #FFFFFF;
				border-radius: 14rpx;
				position: relative;
				margin-top: 26rpx;
				padding-bottom: 20rpx;

				.line {
					position: absolute;
					width: 100%;
					top: 81rpx;
					height: 25rpx;
					left: 0;
				}

				.title-name {
					height: 93rpx;
					line-height: 93rpx;
					font-weight: 500;
					font-size: 31rpx;
					color: #333333;
					padding-left: 33rpx;

				}

				.advice-name,
				.advice-num {

					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					padding-left: 34rpx;
					margin-top: 36rpx;
				}

				.img-wrap {
					padding-left: 36rpx;

					.update-next {
						margin-top: 32rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;

						.blue {
							color: #0874FA;
						}
					}

					.update-img-pre {
						display: flex;
						align-items: center;
						margin-top: 27rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;

						.blue {
							color: #0874FA;
						}

						.pre {}

						.padding {
							margin-left: 68rpx;
						}
					}
				}

				.bgc-wrap {
					margin-top: 22rpx;
					padding: 0 19rpx 0 16rpx;

					.bgc-color-wrap {
						width: 100%;
						height: 310rpx;
						background: #E5EAEF;
						border-radius: 14rpx;
						padding-left: 19rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-evenly;

						view {
							display: flex;
							font-weight: 400;
							font-size: 28rpx;
							color: #666666;

							.name {
								width: 280rpx;
								flex-shrink: 0;
							}

							.val {}
						}
					}
				}
			}

			.item:first-child {
				margin-top: 0rpx !important;
			}

		}

		.container {

			padding: 0 30rpx;

			.top-wrap {
				height: 192rpx;

				background-color: #fff;

				.sel-wrap {
					display: flex;
					height: calc(192rpx - 75rpx);
					align-items: center;

					.two {
						width: auto;
						margin-left: 30rpx;
					}
				}

				.search-wrap {
					width: 100%;
					height: 75rpx;
					background: #FFFFFF;
					border-radius: 14rpx;
					border: 1px solid #E5E5E5;
					display: flex;
					align-items: center;
					margin-top: 31rpx;
					padding-left: 25rpx;

					button {
						width: 112rpx;
						height: 74rpx;
						background: #0874FA;
						border-radius: 14rpx;
						font-weight: 500;
						font-size: 31rpx;
						color: #FFFFFF;
						flex-shrink: 0;
						margin: 0;
						padding: 0;
					}
				}
			}

		}





	}
</style>